<template>
  <div>
    <el-table
      style="width: 100%"
      :data="warnList"
      :show-header="false"
    >
      <el-table-column
        prop="updateDate"
        :label="$t('message')"
      >
        <template slot-scope="scope">
          <router-link
            :to="{ path:'/device/manage/'+scope.row.deviceCore ,query:{'deviceCore':scope.row.deviceCore}}"
          >
            <span>{{ scope.row.deviceName }} /</span>
            <span>{{ scope.row.target }}</span>
            <span>{{ scope.row.logic }}</span>
            <span>{{ scope.row.logicValue }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('status')" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 2" type="success" @click="edit(scope.row)">
            {{ formatDeviceWarnStatus(scope.row.status) }}
          </el-tag>
          <el-tag v-else type="danger" @click="edit(scope.row)">{{ formatDeviceWarnStatus(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="updateDate"
        :label="$t('time')"
        width="300"
      >
        <template slot-scope="scope">
          <span style="margin-left: 13px">{{ formatDate(scope.row.startDate) }}</span>
          <span style="margin-left: 13px">{{ formatDate(scope.row.endDate) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="$t('status')"
      :visible.sync="dialogTableVisible"
    >
      <el-form
        label-width="120px"
      >
        <el-form-item :label="$t('status')">
          <el-radio v-model="warn.status" :label="0">{{ $t('untreated') }}</el-radio>
          <el-radio v-model="warn.status" :label="1">{{ $t('misinformation') }}</el-radio>
          <el-radio v-model="warn.status" :label="2">{{ $t('processed') }}</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="updateStatus">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  formatDate,
  successNotice,
  cancelNotice, formatDeviceWarnStatus
} from '@/util/common'
import {
  pageGetDeviceWarn,
  deleteDeviceWarnList,
  deleteDeviceWarn,
  updateDeviceWarn,
  listDeviceWarnHistory
} from '@/api/iot/iotDeviceWarnApi'
import {
  getUserId
} from '@/util/storage'
import { getPageSize, setPageSize } from '@/util/storage'

export default {
  name: 'DeviceWarn',
  data() {
    return {
      warnHistoryList: [],
      showHistory: false,
      userId: getUserId(),
      showSearch: true,
      warnList: [],
      currentPage: 1,
      total: 0,
      pageSize: getPageSize(),
      status: null,
      warn: {
        warnId: null,
        status: null
      },
      dialogTableVisible: false,
      mList: [],
      deviceName: null,
      deviceCore: null,
      startDate: null,
      endDate: null,
      deptId: null,
      pickerOptions1: {
        shortcuts: [
          {
            text: this.$t('today'),
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: this.$t('today'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: this.$t('a') + this.$t('week') + this.$t('ago'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      }
    }
  },
  created() {
    this.startDate = new Date().getTime() - 7 * 24 * 60 * 60 * 1000
    this.endDate = new Date().getTime() + 5 * 60 * 60 * 1000
    this.pageGetDeviceWarn()
  },
  methods: {
    listDeviceWarnHistory(item) {
      listDeviceWarnHistory({
        warnId: item.warnId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.warnHistoryList = data
          this.showHistory = true
        }
      })
    },
    formatDate(time) {
      if (!time) {
        return formatDate(this, Math.round(new Date().getTime() / 1000))
      }
      return formatDate(this, time)
    },
    formatDeviceWarnStatus(status) {
      return formatDeviceWarnStatus(this, status)
    },
    handleSelectionChange(val) {
      const mList = []
      val.forEach(function(row) {
        mList.push(row.warnId)
      })
      this.mList = mList
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetDeviceWarn()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetDeviceWarn()
    },
    mDel() {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteDeviceWarnList({
            idList: that.mList
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.pageGetDeviceWarn()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    del(index) {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteDeviceWarn({
            warnId: index.warnId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.pageGetDeviceWarn()
              successNotice(that)
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    edit(item) {
      this.warn = item
      this.dialogTableVisible = true
    },
    pageGetDeviceWarn() {
      pageGetDeviceWarn({
        userId: this.userId,
        status: this.status,
        deviceCore: this.deviceCore,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        startDate: this.startDate == null ? null : Math.round(this.startDate / 1000),
        endDate: this.endDate == null ? null : Math.round(this.endDate / 1000)
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.warnList = data.data
        }
      })
    },
    updateStatus() {
      updateDeviceWarn({
        status: this.warn.status,
        warnId: this.warn.warnId
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
          this.dialogTableVisible = false
          this.pageGetDeviceWarn()
        }
      })
    }
  }
}
</script>
<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table .danger-row {
  background: #ff5d42;
}
</style>
